/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, ComputedRef, defineComponent, onMounted, ref, Ref, watch, watchEffect, nextTick } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

import { t } from '@src/locales'

export type SearchHeaderProps = {
  keyword: string;
}

export interface SearchHeaderSetupState {
  handlerInputKeywordChange: (keyword: string) => void;
}

export enum SearchHeaderEmitEventNameEnum {
  Input = 'input',
}

export type SearchHeaderInstance = ComponentInstance & SearchHeaderSetupState
export type SearchHeaderVM = ComponentRenderProxy<SearchHeaderProps> & CommonComponentInstance & SearchHeaderInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserSearchHeader,
  emits: [
    SearchHeaderEmitEventNameEnum.Input
  ],
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  setup(props: SearchHeaderProps, { emit }) {
    
    const handlerInputKeywordChange = (value: string) => {
      emit(SearchHeaderEmitEventNameEnum.Input, value)
    }
    const BaseSelectUserSearchHeader: Ref<HTMLInputElement | null> = ref(null);

    onMounted(() => {
      nextTick(() => {
        BaseSelectUserSearchHeader.value && BaseSelectUserSearchHeader.value.focus();
      })
    })
    
    return {
      handlerInputKeywordChange,
      BaseSelectUserSearchHeader,
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserSearchHeader}>
        <el-input 
          ref="BaseSelectUserSearchHeader"
          clearable
          placeholder={t('common.placeholder.inputNamePhoneToSearch')}
          value={this.keyword}
          onInput={this.handlerInputKeywordChange}
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    )
  }
})
